<!-- map -->
<template>
  <div>
    <van-nav-bar title="地图找房">
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <baidu-map class="bm-view" :center="title" @ready="handler">
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_bottom_RIGHT"></bm-navigation>
      <!-- <MyOverlay
      :position="{lng: 114.064552, lat: 22.548546}"
      text="点击我"
      :active="active"
      @mouseover.native="active = true"
      @mouseleave.native="active = false"
      ></MyOverlay> -->
    </baidu-map>
  </div>
</template>

<script>
import { areaHouseListAPI, cityInfoAPI } from '@/api'
// import MyOverlay from './MyOverlay.vue'
export default {
  data () {
    return {
      title: localStorage.getItem('cityName') || '北京',
      list: [],
      active: false
    }
  },
  // components: {
  //   MyOverlay
  // },
  async created () {
    const res1 = await cityInfoAPI({ name: this.title })
    console.log(res1)
    const res = await areaHouseListAPI({ id: res1.data.body.value })
    console.log(res)
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
      // this.center.lng = 116.404
      // this.center.lat = 39.915
      // this.zoom = 15
    }
  }
}
</script>
<style lang='less' scoped>
.bm-view {
  width: 100%;
  height: 621px;
  // margin-bottom: ;
}
</style>
